---
title: Алиасы
description: Введение в алиасы с Astro.
i18nReady: true
---

**Алиасы** это способ создания сокращений для ваших импортов.

Алиасы могут помочь улучшить опыт разработки в кодовых базах с большим количеством папок или относительных импортов.

```astro title="src/pages/about/company.astro" del="../../components" del="../../assets"
---
import Button from '../../components/controls/Button.astro';
import logoUrl from '../../assets/logo.png?url';
---
```

В этом примере, разработчику необходимо понимать дерево отношений между `src/pages/about/company.astro`, `src/components/controls/Button.astro`, и `src/assets/logo.png`. И затем, если файл `company.astro` будет перемещен, эти импорты также потребовалось бы обновить.

Вы можете добавить алиасы импортов в `tsconfig.json` или `jsconfig.json`.

```json title="tsconfig.json" ins={5-6}
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@assets/*": ["src/assets/*"]
    }
  }
}
```

:::note
Убедитесь, что `compilerOptions.baseUrl` настроен, чтобы пути с алиасами могли быть выполнены.
:::

Сервер разработки автоматически перезапустится после этого изменения конфигурации. Теперь вы можете импортировать с помощью алиасов в любом месте вашего проекта.

```astro title="src/pages/about/company.astro" ins="@components" ins="@assets"
---
import Button from '@components/controls/Button.astro';
import logoUrl from '@assets/logo.png?url';
---
```

Эти алиасы также автоматически интегрируются в [VS Code](https://code.visualstudio.com/docs/languages/jsconfig) и другие редакторы.
